<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        #loader {
            position: fixed;
            /* 固定在页面中央 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f3f3f3;
            /* 背景颜色 */
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            /* 保证在页面其他内容上方 */
        }

        /* 动画效果 */
        #loader::before {
            content: "";
            width: 50px;
            height: 50px;
            border: 5px solid #ccc;
            /* 灰色边框 */
            border-top-color: #4caf50;
            /* 顶部为绿色 */
            border-radius: 50%;
            /* 圆形 */
            animation: spin 1s linear infinite;
            /* 旋转动画 */
        }

        /* 旋转动画的关键帧 */
        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* 页面内容的样式 */
        #content {
            display: none;
            /* 初始隐藏内容 */
            text-align: center;
            margin-top: 50px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>

<body>
    <div id="loader"></div>
    <!-- 页面内容 -->
    <div id="content">
        <h1>是的宏观数据的符合性检查过后和v许昌刑</h1>
        <p>Content appears after the loading animation completes.</p>
        <!-- 其他内容 -->
    </div>
    <script>
        // 监听页面加载完毕事件
        window.addEventListener('load', function () {
            // 获取加载动画的元素
            const loader = document.getElementById('loader');

            // 隐藏加载动画
            loader.style.display = 'none';

            // 显示页面内容
            const content = document.getElementById('content');
            content.style.display = 'block';

            // 启动动画
            startAnimation();
        });

        // 定义动画启动逻辑的函数
        function startAnimation() {
            // 示例动画逻辑
            console.log('Animation started');

            // 可以在这里添加更多动画逻辑
            const content = document.getElementById('content');
            content.style.opacity = '0';
            content.style.transition = 'opacity 2s';
            setTimeout(() => {
                content.style.opacity = '1';
            }, 100);
        }
    </script>
</body>

</html>